// SvgButton.qml
import QtQuick
import Qt5Compat.GraphicalEffects

pragma ComponentBehavior: Bound

UniBtn {
    id: root

    // Svg图片路径
    required property string svgSource
    property real svgSizeProportion: 0.6
    property real svgScaleFactor: 0.07            // 缩放因子
    property real svgRotation: 0                     // 旋转

    // 形状属性
    property int size: 70
    width: size
    height: size

    // 边框属性
    borderWidth: 2               // 边框宽度
    borderColor: "#000000"       // 边框颜色

    property bool enabled: true
    
    // SVG 图像
    Image {
        id: svgImage
        source: root.svgSource
        anchors.centerIn: parent
        width: parent.width * root.svgSizeProportion
        height: parent.height * root.svgSizeProportion
        fillMode: Image.PreserveAspectFit
        sourceSize.width: width
        sourceSize.height: height
        smooth: true
        mipmap: true
        rotation: root.svgRotation

        layer.enabled: true
        layer.effect: ColorOverlay {
            color: root.enabled ? "black" : "gray" // 禁用时置灰
        }

        states: [
            State {
                name: ""
                PropertyChanges {
                    svgImage.scale: 1
                }
            },

            State {
                name: "hovered"
                PropertyChanges {
                    svgImage.scale: 1 + root.svgScaleFactor
                }
            },

            State {
                name: "pressed"
                PropertyChanges {
                    svgImage.scale: 1 - root.svgScaleFactor
                }
            },

            State {
                name: "disabled"
                PropertyChanges {
                    svgImage.scale: 1
                }
            }
        ]

        transitions: [
            Transition {
                from: "*"
                to: "*"

                PropertyAnimation {
                    target: svgImage
                    properties: 'scale'
                    duration: root.animationDuration
                }
            }
        ]
    }

    onIsHoveredChanged: {
        svgButtonStateChanged()
    }
    onIsPressedChanged: {
        svgButtonStateChanged()
    }

    function svgButtonStateChanged(){
        if(root.isPressed){
            svgImage.state = "pressed"
        }
        else if(root.isHovered){
            svgImage.state = "hovered"
        }
        else{
            svgImage.state = ""
        }
    }
}
